<template>
    <div v-move class="header">
        <div class="box"></div>
    </div>
</template>

<script setup lang="ts">
import { Directive , DirectiveBinding } from 'vue'

const vMove:Directive<any,void> = (el:HTMLElement , dir: DirectiveBinding) => {
    let moveElement:HTMLDivElement = el.firstElementChild as HTMLDivElement
    console.log(moveElement);
    const mousedown = (e:MouseEvent) => {
        let X = e.clientX - el.offsetLeft
        let Y = e.clientY - el.offsetTop
        const mousemove = (e:MouseEvent) => {
            el.style.left = e.clientX - X + 'px'
            el.style.top = e.clientY - Y + 'px' 
        }

        const mouseup = () => {
            document.removeEventListener('mousemove',mousemove)
        }

        document.addEventListener('mousemove',mousemove)
        document.addEventListener('mouseup',mouseup)
    }

    moveElement.addEventListener('mousedown',mousedown)
}

</script>

<style scoped>
.header{
    position: relative;
}

.box{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
}

</style>


